<template>
  <div class="nav flex column">
    <div class="nav-logo nav-item">
      <div class="nav-item-c logo">
        <span></span>
      </div>
    </div>
    <div class="nav-item" v-for="item in menuList" :key="item.name" @click="checkMenu(item)"
      :class="{ check: check.name == item.name }">
      <div class="nav-item-c">
        <i class="iconfont" :class="[item.icon]"></i>
        <span>{{ item.menuName }}</span>
      </div>
    </div>
    <div class="nav-item flex1">
      <div class="nav-item-c">

      </div>
    </div>
    <div class="nav-item">
      <div class="nav-item-c">
        <i class="iconfont icon-setting"></i>
        <span>设置</span>
      </div>
    </div>

    <div class="nav-item">
      <div class="nav-item-c">
        <i class="iconfont icon-changjianwentixiangguanwenti2"></i>
        <span>关于</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useRoute, useRouter } from "vue-router"

const route = useRoute();
const router = useRouter();

watch(()=>route.path, ()=>{
  // 路由改变了
  check.value = route
})

const check = ref({})
const menuList = ref([
  {
    menuName: '下载',
    path: '/down',
    name: 'DownIndex',
    icon: 'icon-file'
  },
  {
    menuName: '新建',
    path: '/addDown',
    name: 'AddDown',
    icon: 'icon-add'
  }
])

const checkMenu = (item) => {
  check.value = item
  router.push({
    path: item.path
  })
}

 onMounted(() => {
  check.value = route
 })
</script>

<style lang="scss" scoped>
.nav {
  // margin: 15px;
  // margin: auto;
  width: 78px;
  height: calc(100vh - 20px);
  border-radius: 16px;
  padding: 20px 0px;
  box-sizing: border-box;
  @include background_color("bg_menu_base");
  @include font_color("font_base_in");

  &-logo {
    width: 100%;
    text-align: center;
    
    // height: auto !important;
    .logo{
      background: url("@/assets/logo.png");
      background-repeat: no-repeat;
      // background-size: cover;
      background-size: 58px 58px;
      background-position: center center;
      // filter: drop-shadow(8px 8px 4px);
    }
  }

  &-item {
    width: 100%;
    height: 60px;
    text-align: center;

    &-c {
      width: 78px;
      height: 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      font-size: 12px;
      transition: 1s margin-left linear;

      .iconfont {
        font-size: 24px;
      }
    }

    &.check {
      @include font_color("font_base");

      .nav-item-c {
        width: 68px;
        border-radius: 30px 0px 0px 30px;
        margin-left: 10px;
        @include background_color("bg_base");
      }
    }

  }
}

.nav-item:has(+ .check) {

  // 这种选择器是选中的active相邻的上一个兄弟元素
  .nav-item-c {
    border-radius: 0px 0px 30px 0px;
    @include background_color("bg_menu_base");
  }

  @include background_color("bg_base");
}

.check {
  color: #fff;

  &+.nav-item {
    // 这种选择器是选中的active相邻的下一个兄弟元素
    // background-color: red;
    @include background_color("bg_base");

    .nav-item-c {
      border-radius: 0px 30px 0px 0px;
      @include background_color("bg_menu_base");
    }
  }
}

.flex1 {
  flex: 1
}
</style>